import React, { Component } from 'react'
import axios from 'axios'
import { Toast } from 'antd-mobile'
import NavHeader from '../../components/NavHeader'
import './index.scss'
import { getCurrentCity } from '../../utils'
import { AutoSizer, List } from 'react-virtualized';
// 数据格式化方法
const formatCityData = (list) => {
  const cityList = {}
  // const cityIndex = []

  list.forEach(item => {
    const first = item.short.substr(0, 1)
    // console.log(first);
    if (cityList[first]) {
      cityList[first].push(item)
      // cityList[first]=>[{},{}]
    } else {
      cityList[first] = [item]
      // console.log(cityList);
      // console.log(cityList[first]);
      // console.log(cityList);
    }

  })

  //获取索引数据
  const cityIndex = Object.keys(cityList).sort()
  return {
    cityList,
    cityIndex

  }
}

// // 列表数据的数据源
// const list = Array(100).fill('react-virtualized')

// // 渲染每一行数据的渲染函数
// // 函数的返回值就表示最终渲染在页面中的内容
// function rowRenderer({
//   key, // Unique key within array of rows
//   index, // 索引号
//   isScrolling, // 当前项是否正在滚动中
//   isVisible, // 当前项在 List 中是可见的
//   style, // 注意：重点属性，一定要给每一个行数据添加该样式！作用：指定每一行的位置
// }) {
//   return (
//     <div key={key} style={style}>
//       {list[index]}
//     </div>
//   );
// }

// 索引（A、B等）的高度
const TITLE_HEIGHT = 36
// 每个城市名称的高度
const NAME_HEIGHT = 50

// 封装处理字母索引方法
const formatCityIndex = (letter) => {
  switch (letter) {
    case '#':
      return "当前定位"
    case 'hot':
      return '热门城市'

    default:
      return letter.toUpperCase()
  }
}

// 有房源的城市
const HOUSE_CITY = ['北京', '上海', '广州', '深圳']


export default class CityList extends Component {
  constructor(props) {
    super(props)
    this.state = {
      cityList: {},
      cityIndex: [],
      //指定右侧索引高亮
      activeIndex: 0

    }
    // 创建ref对象
    this.cityListComponent = React.createRef()

  }

  async componentDidMount() {
    await this.getCityList()
    //调用measureAllRows，提前计算List 中每一行的高度，实现 scrollToRow的精确跳转
    // 注意:调用这个方法的时候，需要保证List 组件中已经有数据了!,如果List组件中数据为空，那么就会导致下面方法报错。（由于 this.getCityList()是异步调用，因此下面那个还没拿到数据）
    //解决:只要保证这个方法是在获取到数据之后调用的即可。于是给上面this.getCityList()加上await 也就是等待这个异步执行完成，我再执行下面的代码，于是componentDidMount 就也需要加上async了
    // this.cityListComponent.current.measureAllRows()   但是我这个方法写上去不好使 服了 
  }
  async getCityList() {

    const res = await axios.get('http://localhost:8080/area/city?level=1')
    // console.log(res);
    const { cityList, cityIndex } = formatCityData(res.data.body)

    const hotRes = await axios.get('http://localhost:8080/area/hot')
    cityList['hot'] = hotRes.data.body
    // 将索引添加到cityIndex中
    cityIndex.unshift('hot')
    // console.log(cityIndex);

    // 获取当前定位城市
    const curCity = await getCurrentCity()
    // 这个地方， cityList他是个对象，然后cityList['#'] ，就相当于cityList:{ #:[curCity] }  直接加了一对键值对 我现在是这么理解的 
    cityList['#'] = [curCity]
    cityIndex.unshift('#')
    this.setState({ cityList, cityIndex })
  }
  /* 
   1 给城市列表项绑定点击事件。
   2 判断当前城市是否有房源数据（只有北/上/广/深四个城市有数据）。
   3 如果有房源数据，则保存当前城市数据到本地缓存中，并返回上一页。
   4 如果没有房源数据，则提示用户：该城市暂无房源数据，不执行任何操作。
 */
  changeCity = ({ label, value }) => {
    // console.log(curCity);
    if (HOUSE_CITY.indexOf(label) > -1) {
      // 有
      localStorage.setItem('hkzf_city', JSON.stringify({ label, value }))
      this.props.history.go(-1)
    } else {
      Toast.info('该城市暂无房源数据', 1, null, false)
    }
  }
  // 渲染每一行数据的渲染函数
  // 函数的返回值就表示最终渲染在页面中的内容
  rowRenderer = ({
    key, // Unique key within array of rows
    index, // 索引号
    isScrolling, // 当前项是否正在滚动中
    isVisible, // 当前项在 List 中是可见的
    style, // 注意：重点属性，一定要给每一个行数据添加该样式！作用：指定每一行的位置
  }) => {
    // 获取每一行的字母索引
    const { cityIndex, cityList } = this.state
    const letter = cityIndex[index]
    // console.log(letter);

    return (
      <div key={key} style={style} className="city">
        <div className="title">{formatCityIndex(letter)}</div>
        {
          cityList[letter].map(item => {
            return (<div className="name" key={item.value} onClick={() => { this.changeCity(item) }}>{item.label}</div>)
          })
        }
      </div>
    );
  }
  //创建动态计算每一行高度
  getRowHeight = ({ index }) => {
    // 索引标题高度 + 城市数量 * 城市名称的高度
    // TITLE_HEIGHT + cityList[cityIndex[index]].length * NAME_HEIGHT
    const { cityList, cityIndex } = this.state
    return TITLE_HEIGHT + cityList[cityIndex[index]].length * NAME_HEIGHT
  }

  renderCityIndex = () => {
    const { cityIndex, activeIndex } = this.state
    return cityIndex.map((item, index) =>
      <li className='city-index-item' key={item} onClick={() => {
        // console.log(index);
        this.cityListComponent.current.scrollToRow(index)
      }}>
        <span className={activeIndex === index ? 'index-active' : ''}>
          {item === 'hot' ? '热' : item.toUpperCase()}
        </span>
      </li>
    )
  }
  //用于获取List组件中渲染行的信息
  onRowsRendered = ({ startIndex }) => {
    // console.log(startIndex);
    if (this.state.activeIndex !== startIndex) {
      this.setState({ activeIndex: startIndex })
    }
  }

  render() {
    return (
      <div className='citylist'>
        <NavHeader>城市选择</NavHeader>


        {/* 城市列表 */}

        <AutoSizer>
          {({ height, width }) => (
            <List
              ref={this.cityListComponent}
              width={width}
              height={height}
              rowCount={this.state.cityIndex.length}
              rowHeight={this.getRowHeight}
              rowRenderer={this.rowRenderer}
              onRowsRendered={this.onRowsRendered}
              scrollToAlignment='start'
            />
          )}
        </AutoSizer>
        {/* 右侧索引列表 */}
        <ul className="city-index">
          {this.renderCityIndex()}
        </ul>

      </div>
    )
  }
}
